import { darkMode } from '~/types/theme'
import type { Ref } from 'vue'
import { useTheme } from '@/store/modules/theme'
import { handleRgbaToRgb } from '@/utils/theme/setTheme'
import { useDrag } from './useDrag'

export const useProDialog = (props, emits) => {
  const themeStore = useTheme()
  const isDark = computed(() => {
    if (themeStore.darkMode === darkMode.LIGHT) return false
    else return true
  })
  // 外部控制dialog显示与隐藏的属性
  const { showDialog, width, height } = toRefs(props)
  // 内部控制dialog显示与隐藏的属性
  const show = ref(showDialog.value)
  // 是否全屏
  const isFullscreen: Ref<boolean> = ref(false)
  // dialog唯一id 用来支持同时显示多个弹窗支持拖拽
  const id = props.id ? props.id : 't' + Date.now()
  // 重置弹窗位置函数
  let handleResetDrag
  // 清除弹窗鼠标拖拽监听
  let handleClearMouseEvent

  const marginTop: Ref<string> = ref('0px')
  const marginBottom: Ref<string> = ref('0px')

  // 是否启用弹窗撑开
  const isFixScreen = computed(() => {
    return !!(props.top || props.bottom)
  })

  // 切换全屏
  const toggle = () => {
    if (!isFullscreen.value) {
      handleResetDrag(true)
    } else {
      handleResetDrag(false)
    }
    isFullscreen.value = !isFullscreen.value

    emits('handleFullScreenChange', isFullscreen.value)
  }
  /**
   * @description: 改变弹窗状态
   * @param {boolean} show
   * @return {*}
   */
  const handleChangeDialogVisiable = (show: boolean) => {
    // 抛出弹窗状态变化事件
    emits('dialogVisiableChange', show)
    emits('update: modalProps', Object.assign(props.modalProps, { show: show }))
  }
  /**
   * @description: 处理底部按钮点击
   * @param {boolean} isConfirm
   * @return {*}
   */
  const handleButtonClick = (isConfirm: boolean) => {
    if (isConfirm) emits('handleConfirm')
    else show.value = false
  }
  /**
   * @description: 设置弹窗最大高度和上下间距
   * @param {number} top
   * @param {number} bottom
   * @return {*}
   */
  const setFixScreen = () => {
    // 如果只提供一个属性，另一个属性复制这个属性
    const top: number | string = props.top || props.bottom
    const bottom: number | string = props.bottom || props.top
    marginTop.value = typeof top === 'string' ? top : top + 'px'
    marginBottom.value = typeof bottom === 'string' ? bottom : bottom + 'px'
    nextTick(() => {
      const dragDom: HTMLDivElement | null = document.querySelector('.n-dialog')
      if (dragDom) {
        dragDom.style.cssText += `;margin: ${marginTop.value} auto ${marginBottom.value} auto;`
      }
    })
  }
  const translateWidth = computed(() => {
    if (!width.value) return false
    else {
      return isNaN(width.value) ? width.value : width.value + 'px'
    }
  })
  const translateHeight = computed(() => {
    if (!height.value) return false
    else {
      return isNaN(height.value) ? height.value : height.value + 'px'
    }
  })
  // 背景色
  const bgColor = computed<string>(() => {
    return handleRgbaToRgb(themeStore.primary, 0.1)
  })
  // 阴影色
  const shadowColor = computed<string>(() => {
    return handleRgbaToRgb(themeStore.primary, 0.5)
  })

  // 弹窗打开时，添加拖拽功能
  watch(
    showDialog,
    (val) => {
      if (val) {
        nextTick(() => {
          // 增加拖拽
          if (props.drag) {
            const { resetDrag, clearMouseEvent } = useDrag({ id: id })
            handleResetDrag = resetDrag
            handleClearMouseEvent = clearMouseEvent
          }
          // 重新设置上下边距
          if (isFixScreen.value) {
            setFixScreen()
          }
        })
      }
      // 同步内外部显隐属性变化
      if (val !== show.value) show.value = val
    },
    {
      flush: 'post',
      immediate: true
    }
  )

  // 同步内外部显隐属性变化
  watch(show, (val) => {
    if (val !== showDialog.value) {
      emits('update:showDialog', val)
      // 如果是关闭，抛出关闭按钮点击事件
      if (!val) emits('handleCancel')
    }
    if (!val) emits('afterClosed')
  })

  onUnmounted(() => {
    if (handleClearMouseEvent) handleClearMouseEvent()
  })

  return {
    id,
    isDark,
    isFullscreen,
    marginTop,
    marginBottom,
    isFixScreen,
    show,
    translateWidth,
    translateHeight,
    bgColor,
    shadowColor,
    toggle,
    handleChangeDialogVisiable,
    handleButtonClick
  }
}
